<template>
    <div>
        <Tabs v-model="active" sticky :border="false" background="#0DCDB5" color="#FFFFFF" title-active-color='#FFFFFF'
              title-inactive-color="#FFFFFF"
              class="tabs">
            <Tab v-for="item in tabList" :title="item.title" :name="item.name" :key="item.id" class="tab"/>
            <List v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了~"
                  class="list-box"
                  @load="onLoad">
                <div class="order-box" v-for="item in orderList" :key="item.id">
                    <div class="acea-row row-middle row-between" @click="jumpPage(`shootOrderInfo?orderId=${item.id}`)">
                        <div class="acea-row row-middle">
                            <img :src="orderLeftIcon" alt="order-left-icon" class="order-left-icon">
                            <div class="order-title">{{item.title}}</div>
                        </div>
                        <div class="status-1 status" v-if="true">未审核</div>
                        <div class="status-2 status" v-if="1===2">已通过</div>
                        <div class="status-3 status" v-if="1===3">已审核</div>
                    </div>
                    <div class="order-name">{{item.name}}</div>
                    <div class="acea-row row-middle row-between">
                        <div class="order-time acea-row row-column row-column-between">
                            <div>开始时间：{{item.startTime}}</div>
                            <div>结束时间：{{item.endTime}}</div>
                        </div>
                        <Button :icon="btnIcon" color="#FF8D51" class="bottom-btn" size="large" v-if="true">传照片</Button>
<!--                        <Button color="#0DCDB5" class="bottom-btn" size="large" v-if="true">已完成</Button>-->
<!--                        <Button color="#F7F8FC" class="bottom-btn pass-btn" size="large" :disabled="true" v-if="true">已审核</Button>-->
                    </div>
                </div>
            </List>

        </Tabs>

    </div>
</template>

<script>
    import {Tab, Tabs, List, Button} from 'vant';

    const loadImg = name => require(`@/assets/images/${name}.png`)

    export default {
        name: "ShootOrder",
        components: {
            Tab,
            Tabs,
            List,
            Button
        },
        data() {
            return {
                active: '1',
                tabList: [
                    {
                        id: 1,
                        title: '全部',
                        name: '',
                    },
                    {
                        id: 2,
                        title: '未完成',
                        name: '',
                    },
                    {
                        id: 3,
                        title: '已完成',
                        name: '',
                    }
                ],
                list: [],
                loading: false,
                finished: true,
                orderLeftIcon: loadImg('order_left_icon'),
                arrowRight: loadImg('arrow-right'),
                btnIcon: loadImg('shoot'),
                orderList: [
                    {
                        id: 1,
                        title: '四川理工大学第四实验楼',
                        name: '第四实验楼拍摄征集活动',
                        startTime: '2020-01-12 15:23:29',
                        endTime: '2020-01-12 15:23:29',
                    }
                ],
            }
        },
        methods: {
            jumpPage(page) {
                this.$router.push(page)
            }
        }
    }
</script>

<style scoped lang="scss">
    .tabs {
        .order-box {
            margin: 15px auto;
            width: 355px;
            height: 150px;
            background: rgba(255, 255, 255, 1);
            border-radius: 8px;
            padding: 20px;

            .order-left-icon {
                width: 15px;
                height: 15px;
            }

            .order-title {
                font-size: 14px;
                font-weight: 400;
                color: rgba(66, 69, 95, 1);
                margin-left: 9px;
            }

            .arrow-right {
                width: 14px;
                height: 14px;
            }
            .status{
                font-size:14px;
                font-weight:400;
            }

            .status-1 {
                color: #FF8D51;
            }

            .status-2 {
                color: #0DCDB5;
            }

            .status-3 {
                color: #A3A5B1;
            }

            .order-name {
                font-size: 18px;
                font-weight: 500;
                color: rgba(66, 69, 95, 1);
                margin: 17px 0 10px;
            }

            .order-time {
                font-size: 12px;
                font-weight: 400;
                color: rgba(163, 165, 177, 1);
                height: 40px;
            }

            .bottom-btn {
                width: 70px;
                height: 30px;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 400;
            }

            .pass-btn {
                color: #A3A5B1!important;
            }
        }
    }
</style>
